import 'package:flutter/material.dart';
import 'res/listData.dart';

void main(){
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter Example"),
        backgroundColor: Colors.yellow,),
        body:const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topLeft,
      decoration:const BoxDecoration(
        color: Colors.black12
      ),
      child: ListView(
        children: [
          ListTile(
            title: const Text("Padding组件",style: TextStyle(
              fontWeight: FontWeight.w900,
              fontSize: 24
            ),),
            subtitle: Container(

              alignment: Alignment.topLeft,
              decoration: const BoxDecoration(
                color: Colors.red
              ),
              child: Padding(
                padding: const EdgeInsets.all(10),
                child: Image.network("https://www.itying.com/images/flutter/1.png",
                  ),
              ),
            ),
          ),
          ListTile(
            title: const Text("线性布局-Row水平布局",style: TextStyle(
                fontWeight: FontWeight.w900,
                fontSize: 24
            ),),
            subtitle: Container(
              height: 200,
              // alignment: Alignment.topLeft,
              decoration: const BoxDecoration(
                color: Colors.blue
              ),
              child:Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    width: 80,
                    height: 80,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("A",style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),),
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("A",style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),),
                  ),
                  Container(
                    width: 80,
                    height: 80,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("A",style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),),
                  ),
                ],
              )
            ),
          ),
          ListTile(
            title: const Text("线性布局-Column水平布局",style: TextStyle(
                fontWeight: FontWeight.w900,
                fontSize: 24
            ),),
            subtitle: Container(
                height: 300,
                width: 300,
                // alignment: Alignment.center,
                color: Colors.yellow,
                // decoration: const BoxDecoration(
                //   color: Colors.blue
                // ),
                child:Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                      width: 80,
                      height: 80,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(10)
                      ),
                      child: const Text("A",style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                      ),),
                    ),
                    Container(
                      width: 80,
                      height: 80,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(10)
                      ),
                      child: const Text("A",style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                      ),),
                    ),
                    Container(
                      width: 80,
                      height: 80,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(10)
                      ),
                      child: const Text("A",style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                      ),),
                    ),
                  ],
                )
            ),
          ),
          ListTile(
            title: const Text("弹性布局-Flex&Expanded",style: TextStyle(
                fontWeight: FontWeight.w900,
                fontSize: 24
            ),),
            subtitle: Column(
              children: [
                const Text("左边占1份，右边占2份"),
                Row(
                  children: [
                    Expanded(
                      flex:1,
                      child: Container(
                        width: 80,
                        height: 80,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("A",style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                        ),),
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child:Container(
                        width: 80,
                        height: 80,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("A",style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                        ),),
                      ),
                    )
                  ],
                ),
                const SizedBox(height: 10,),
                const Text("右边固定左边自适应"),
                Row(
                  children: [
                    Expanded(
                      flex:1,
                      child: Container(
                        width: 80,
                        height: 80,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("A",style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                        ),),
                      ),
                    ),
                    Container(
                      width: 80,
                      height: 80,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(10)
                      ),
                      child: const Text("A",style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                      ),),
                    ),

                  ],
                ),
                const SizedBox(height: 10,),
                const Text("布局示例"),
                Column(
                 children: [
                   SizedBox(
                     height: 200,
                     width: double.infinity,
                     child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.fill,),
                   ),
                   const SizedBox(height: 10,),
                   Row(
                     children: [
                       Expanded(
                           flex:2,
                           child:Container(
                             padding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
                             height: 200,
                             child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover,),
                           )
                       ),
                       Expanded(
                           flex:1,
                           child:SizedBox(
                             height: 200,
                             child: Column(
                               children: [
                                 Expanded(
                                     flex:2,
                                     child: Image.network("https://www.itying.com/images/flutter/4.png",fit: BoxFit.cover,)

                                 ),
                                 const SizedBox(height: 10,),
                                 Expanded(
                                     flex:2,
                                     child: Image.network("https://www.itying.com/images/flutter/5.png",fit: BoxFit.cover,)
                                 ),
                               ],
                             ),
                           )
                       )
                     ],
                   )
                 ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
